<template>
  <div class="box">
    <div class="course-top">
      <div class="top-left">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>布置作业</el-breadcrumb-item>
          <el-breadcrumb-item>检查作业</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div @click="back()" class="top-right">返回</div>
    </div>
    <div class="container" :element-loading-text="text">
      <!-- v-loading="isloading" -->
      <div v-show="isShow" class="Card">
        <div class="card">
          <el-card class="card2">
            <div style="font-weight: 600; color: #333333; font-size: 18px">
              完成率趋势
            </div>
            <div
              style="
                font-size: 20px;
                color: #333333;
                text-align: center;
                margin-top: 100px;
              "
              v-if="!echartsLineX.length"
            >
              <div
                style="
                  width: 200px;
                  height: 200px;
                  margin: auto;
                  margin-top: -65px;
                "
              >
                <img src="@/assets/learningAssignmentsImg/img2.png" alt="" />
              </div>
            </div>
            <div v-if="echartsLineX.length">
              <div
                ref="monthWorkOrderss"
                class="echarts-box"
                style="width: 100%; height: 300%"
              ></div>
            </div>
          </el-card>
        </div>
        <div class="card3" style="margin-top: 1%">
          <el-card class="card4">
            <div class="handler">
              <div
                style="
                  font-weight: 600;
                  color: #333333;
                  font-size: 18px;
                  margin-bottom: 10px;
                "
              >
                当日学生作业完成情况
              </div>

              <!-- <div>
                <el-select
                  v-model="model.classId"
                  @change="getstuvideoCompletion"
                  placeholder=""
                  style="width: 200px; margin-right: 10px"
                >
                  <el-option
                    v-for="item in classList"
                    :value="item.pscId"
                    :key="item.pscId"
                    :label="item.scName + item.pscName"
                    v-loading="fullscreenLoading"
                  ></el-option>
                </el-select>
              </div> -->
            </div>
            <div v-if="data.length">
              <el-table
                :data="data"
                height="400"
                empty-text="当天暂无学生完成作业"
                 :header-cell-style="{
          background: '#FAFAFA',
          color: '#333333',
        }"
                style="width: 100%"
              >
                <el-table-column
                  prop="stuName"
                  width="450"
                  align="center"
                  label="学生姓名"
                >
                </el-table-column>
                <el-table-column align="center" label="当日作业情况">
                  <template slot-scope="scope">
                    <div class="table">
                      <div style="display: flex">
                        <div style="margin: 10px">
                          作业完成次数 &nbsp;<i
                            style="color: #1890ff; font-style: normal"
                            >{{ scope.row.studyNum }}次</i
                          >
                        </div>
                        <div style="text-align: center">
                          <el-progress
                            stroke-width="4"
                            width="40"
                            type="circle"
                            :percentage="scope.row.progress"
                          ></el-progress>
                        </div>
                      </div>

                      <div
                        style="
                          white-space: nowrap;
                          margin-right: 30px;
                          cursor: pointer;
                        "
                      >
                        老师点赞
                        <template v-if="scope.row.approve == 1">
                          <svg
                            style="transform: translateY(2px)"
                            t="1656833940827"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="815"
                            width="20"
                            height="20"
                            @click="somebody(scope.row.stuId, scope.row)"
                          >
                            <path
                              d="M32 407.584a279.584 279.584 0 0 1 480-194.944 279.584 279.584 0 0 1 480 194.944 278.144 278.144 0 0 1-113.024 224.512L562.592 892.8a96 96 0 0 1-124.416-1.952l-308.16-270.688A278.976 278.976 0 0 1 32 407.584z"
                              fill="#d81e06"
                              p-id="816"
                            ></path>
                          </svg>
                        </template>
                        <template v-if="scope.row.approve == 0">
                          <svg
                            style="transform: translateY(2px)"
                            t="1668671175471"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            @click="somebody(scope.row.stuId, scope.row)"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="2920"
                            width="20"
                            height="20"
                          >
                            <path
                              d="M667.786667 117.333333C832.864 117.333333 938.666667 249.706667 938.666667 427.861333c0 138.250667-125.098667 290.506667-371.573334 461.589334a96.768 96.768 0 0 1-110.186666 0C210.432 718.368 85.333333 566.112 85.333333 427.861333 85.333333 249.706667 191.136 117.333333 356.213333 117.333333c59.616 0 100.053333 20.832 155.786667 68.096C567.744 138.176 608.170667 117.333333 667.786667 117.333333z m0 63.146667c-41.44 0-70.261333 15.189333-116.96 55.04-2.165333 1.845333-14.4 12.373333-17.941334 15.381333a32.32 32.32 0 0 1-41.770666 0c-3.541333-3.018667-15.776-13.536-17.941334-15.381333-46.698667-39.850667-75.52-55.04-116.96-55.04C230.186667 180.48 149.333333 281.258667 149.333333 426.698667 149.333333 537.6 262.858667 675.242667 493.632 834.826667a32.352 32.352 0 0 0 36.736 0C761.141333 675.253333 874.666667 537.6 874.666667 426.698667c0-145.44-80.853333-246.218667-206.88-246.218667z"
                              p-id="2921"
                            ></path>
                          </svg>
                        </template>
                      </div>

                      <div>
                        <el-button
                          size="small"
                          plain
                          type="primary"
                          @click="hanlder(scope.row)"
                          >详情</el-button
                        >
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div v-if="!data.length">
              <div
                style="
                  width: 400px;
                  height: 270px;
                  margin: auto;
                  margin-top: 80px;
                "
              >
                <img src="@/assets/learningAssignmentsImg/img3.png" alt="" />
              </div>
            </div>
          </el-card>
        </div>
        <el-dialog
          title="检查作业详情"
          :visible.sync="dialogVisible"
          width="30%"
          :show-close="false"
        >
          <div class="can">
            <div class="con">
              <div><span class="tex">学生姓名：</span> {{ name }}</div>
              <div>
                <span class="tex">教师点赞：</span
                >{{ dianzan == 1 ? "已点赞" : "未点赞" }}
              </div>
            </div>
            <div class="cen">
              <div>
                <span class="tex">作业完成次数：</span
                ><span
                  ><el-tag type="info" v-if="status == 0" style="margin: 0 10px"
                    >未开始</el-tag
                  >
                  <el-tag
                    type="success"
                    v-if="status == 1"
                    style="margin: 0 10px"
                    >进行中 {{ progress }}%</el-tag
                  >
                  <el-tag v-if="status == 2" style="margin: 0 10px"
                    >已完成{{ studyNum }}次</el-tag
                  >
                </span>
              </div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import Calendar from "vue-calendar-component";
import { classSimList,classlike } from "@/api/conmmon";
import {
  teacherLearningwork,
  stuworkLink,
  stuvideoCompletion,
  learningworkApprove,
} from "@/api/studyAssignments/learningAssignments";
import theme from "@/utils/customed.json";
import * as echarts from "echarts";
import moment from "moment";
export default {
  name: "",
  components: {
    Calendar,
  },
  props: {},
  data() {
    return {
      name: "",
      dianzan: "",
      status: "",
      studyNum: "",
      progress: "",
      list: [],
      fullscreenLoading: false,
      value1: moment(new Date()).format("YYYY-MM-DD"),
      classModel: {
        pageSize: 1000000,
        pageNum: 1,
      },
      isShow: true,
      isloading: true,
      data: [],
      classList: [],
      dialogVisible: false,
      model: {
        pageSize: 99999,
        pageNum: 1,
        classId: null,
      },
      text: "暂无班级",
      echartsLineX: [],
      echartsLineY: [],
      learningWorkId: null,
      classchomework: null,
      classwhomework: null,
      activeVar: 0,
      stuInfo: {
        allhomeworkshow: {},
      },
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getClassList();
    this.getteacherLearningwork();
    this.getstuworkLink();
  },
  mounted() {},
  methods: {
    back() {
      this.$router.push({
        path: "sportwork",
        query: {
          show: 2,
        },
        
      });
    },
    getteacherLearningwork() {
      let data = {
        userId: this.$store.state.user.USER_INFO.id,
        schoolId: this.$store.state.user.USER_INFO.pscShId,
      };
      teacherLearningwork(data).then((res) => {
        if (res.code == 200) {
          this.list = res.result;
          this.learningWorkId = this.$route.query.learningWorkId;
          this.getstuvideoCompletion();
        }
      });
    },
    getstuworkLink() {
      let data = {
        userId: this.$store.state.user.USER_INFO.id,
      };
      stuworkLink(data).then((res) => {
        if (res.code == 200) {
          this.echartsLineX = res.result.map((item) => item.learningWorkName);
          this.echartsLineY = res.result.map((item) => item.stuCount);
          this.initMonthWorkOrderss();
        }
      });
    },
    getstuvideoCompletion() {
      let data = {
        classId: this.$route.query.classId,
        learningWorkId: this.$route.query.learningWorkId,
      };
      stuvideoCompletion(data).then((res) => {
        if (res.code == 200) {
          this.data = res.result;
        }
      });
    },
    hand(item, index) {
      this.activeVar = index;
      this.learningWorkId = this.$route.query.learningWorkId;
      this.getstuvideoCompletion();
    },
    // xxxTableRowClassName({ row, rowIndex }) {
    //   if (rowIndex % 2 !== 0) {
    //     return "statistics-warning-row";
    //   } else {
    //     return "";
    //   }
    // },

    getClassList() {
      this.isloading = true;
      let data = {
        userId: this.$store.state.user.USER_INFO.id,
        pscShId: this.$store.state.user.USER_INFO.pscShId,
      };
      classSimList(data).then((response) => {
        if (response.code === 200) {
          this.classList = response.result;
          if (response.result.length) {
            if (sessionStorage.getItem("classId")) {
              this.model.classId = JSON.parse(
                sessionStorage.getItem("classId")
              );
              sessionStorage.removeItem("classId");
            } else {
              this.model.classId = response.result[0].pscId;
            }

            this.getstuworkLink();
          }
          if (response.result.length) {
            this.isloading = false;
          }
        }
      });
    },
    hanlder(row) {
      this.name = row.stuName;
      this.dianzan = row.approve;
      this.dialogVisible = true;
      this.status = row.status;
      this.studyNum = row.studyNum;
      this.progress = row.progress;
    },

    //  点赞的状态
    somebody(id, status) {
      let data = {
        pjStuId: id,
        // pjIsHonor:status.honor,
        pjIsHonor: status.honor == 1 ? "0" : "1",
        pjTodayTime: this.value1,
      };
      classlike(data).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.gettaskResultStatistics();
        } else {
          this.$message({
            message: res.message,
            type: "error",
          });
        }
      });
    },
    initMonthWorkOrderss() {
      echarts.registerTheme("theme", theme);
      let myChart = echarts.init(this.$refs.monthWorkOrderss, "theme");
      let options = {
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
          axisLabel: {
            interval: 0,
            rotate: -38,
            formatter: function (value) {
              if (value.length > 4) {
                return `${value.slice(0, 4)}...`;
              }
              return value;
            },
          },
          data: this.echartsLineX,
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            data: this.echartsLineY,

            type: "line",
            // symbol: "circle",
            itemStyle: {
              normal: {
                borderColor: "#fff",
                borderWidth: 1,
              },
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#538FFF", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#fff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
        grid: {
          top: 50,
          right: 30,
          left: 30,
          bottom: 40,
        },
      };

      window.addEventListener("resize", () => {
        myChart.resize();
      });
      myChart.setOption(options);
    },
  },
};
</script>

<style scoped lang="scss">
.box {
  padding: 2vh 15vw;
}
.course-top {
  display: flex;
  justify-content: space-between;
  padding: 1vh 0;
  ::v-deep .el-breadcrumb__inner {
    font-size: 1vw;
  }
  .top-right {
    font-size: 1vw;
    color: #1677ff;
  }
}
.container {
  height: 84vh;
  max-height: 84vh;
  overflow-y: auto;
}
.active {
  color: #1890ff;
}
.tex {
  color: #333333;
  font-weight: 600;
}
img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.can {
  width: 80%;
  margin-left: 5%;
}
.con {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.handler {
  display: flex;
  justify-content: space-between;
}
.Card {
  display: flex;
  margin-top: -1.5%;
  flex-direction: column;
  .card {
    margin-top: 1%;
    display: flex;
    height: 50%;
    width: 100%;
    .card1 {
      width: 30%;
      height: 400px;

      // overflow-x: hidden;
      // overflow-y: scroll;
    }
    .card11 {
      overflow-x: hidden;
      overflow-y: scroll;
    }
    .card2 {
      width: 100%;
    }
  }
  .card3 {
    width: 100%;
    height: 50%;
    .card4 {
      height: 50%;
    }
  }
}

::v-deep .el-table__row.statistics-warning-row {
  background: rgba(61, 157, 255, 0.05);
}
::v-deep .wh_container {
  max-width: 100% !important;
  margin: auto !important;
}
::v-deep .wh_content_all {
  background-color: #fff !important;
}
::v-deep .wh_top_changge li {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #363636 !important;
}
::v-deep .wh_content_item .wh_chose_day {
  background: #1890ff !important;
  color: #fff !important;
}
::v-deep .wh_jiantou2 {
  width: 12px !important;
  height: 12px !important;
  border-top: 2px solid #525252 !important;
  border-right: 2px solid #525252 !important;
  transform: rotate(45deg) !important;
}
::v-deep .wh_jiantou1 {
  width: 12px !important;
  height: 12px !important;
  border-top: 2px solid #525252 !important;
  border-left: 2px solid #525252 !important;
  transform: rotate(-45deg) !important;
}
::v-deep .wh_content_item {
  color: #525252 !important;
}
::v-deep .wh_content_item .wh_isToday {
  color: #fff !important;
  background: #f84c0a !important;
}
::v-deep .wh_content_item .wh_chose_day {
  background: #f84c0a !important;
}
::v-deep .wh_content_item > .wh_isMark {
  color: #fff !important;
  background: #1890ff !important;
}
::v-deep .wh_item_date:hover {
  background: #1890ff !important;
  color: #ffffff !important;
  border-radius: 50% !important;
}
::v-deep .el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 20px;
} //表头
::v-deep .el-table__body tr,
.el-table__body td {
  padding: 0;
  height: 10px;
} ///各行
// 滚动条大小设置
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  /*纵向滚动条*/
  width: 5px;
  /*横向滚动条*/
  height: 5px;
}

// 滚动条滑块样式设置
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 5px;
}

// 滚动条背景样式设置
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background: none;
}

// 表格横向和纵向滚动条对顶角样式设置
::v-deep .el-table__body-wrapper::-webkit-scrollbar-corner {
  background-color: #111;
}

// 去除滚动条上方多余显示
::v-deep .el-table__header .has-gutter th.gutter {
  display: none !important;
}
// Firefox滚动条样式设置
::v-deep .el-table__body-wrapper {
  overflow-y: scroll !important;
  scrollbar-color: #bebebf transparent !important;
  scrollbar-width: thin !important;
}
.wh_container {
  height: 331px;
}
.icon {
  padding-top: 5px;
}
::v-deep .el-table__row.statistics-warning-row {
  background: #f5f7fa !important;
}
::v-deep .el-calendar-table .el-calendar-day {
  width: 70px;
  height: 40px;
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 2220px;
}
.table {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.flex {
  flex: 1;
}
</style>
